<!DOCTYPE html>
<html>

<head>
  <title>DashBoard - 数据展示</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link href="{% static 'bootstrap-5.1.3-dist/css/bootstrap.min.css' %}" rel="stylesheet" /> -->
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/custom.css">
  <!-- <link rel="stylesheet" href="{% static 'css/demo.css' %}"> -->
  <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">

</head>

<body style="background: url('img/bg.jpg') no-repeat top center;">

  <header style="background: url('img/head_bg.png') no-repeat top center;">
    <h1>数据可视化-Echarts</h1>
    <div class="showTime">2022年8月20日 12:00:00</div>
  </header>

  <section class="mainbox">
    <div class="column">
      <div class="nav" style="background: url('img/line.png') rgba(255, 255, 255, 0.03);">
        <h2>导航栏</h2>

        <div class="zTreeDemoBackground left">
          <ul id="treeDemo" class="ztree" style="margin-top: 10px; border: 1px solid #617775; background: #f0f6e4; height:6rem; overflow-y:scroll; overflow-x:auto;"></ul>
        </div>

<!--         <ul class="ul">
          <li class="bg">
            <div class="bg1">
              <i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i>
              <p>人社</p>
            </div>
            <ul class='list'>
              <li>
                <i class="fa fa-circle fa-fw" aria-hidden="true"></i>
                <a href="#" class="">无锡</a>
              </li>
            </ul>
          </li>
          <li class="bg">
            <div class="bg1">
              <i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i>
              <p>服务</p>
            </div>
            <ul class='list'>
              <li>
                <i class="fa fa-circle fa-fw" aria-hidden="true"></i>
                <a href="#" class="">深圳标准院</a>
              </li>
              <li>
                <i class="fa fa-circle fa-fw" aria-hidden="true"></i>
                <a href="#" class="">佛山禅城</a>
              </li>
              <li>
                <i class="fa fa-circle fa-fw" aria-hidden="true"></i>
                <a href="#" class="">四川政府政务中心</a>
              </li>
              <li>
                <i class="fa fa-circle fa-fw" aria-hidden="true"></i>
                <a href="#" class="">宁夏自治区便民服务平台</a>
              </li>
            </ul>
          </li>
          <li class="bg">
            <div class="bg1">
              <i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i>
              <p>测试树形框</p>
            </div>
            <ul class="list">
              <li>1</li>
              <li>2</li>
            </ul>
          </li>
        </ul> -->

        <div class="nav-footer"></div>
      </div>
      <div class="panel" style="background: url('{% static 'img/line.png' %}') rgba(255, 255, 255, 0.03);">
        <h2>最新消息</h2>
        <div id="auto-scroll" class="wrap">
          <ul style="margin-top: -2.13728px;">
            <li>这就需要前端工程师不仅要有系统的技术技能...</li>
            <li>广泛学习，留心观察，做一个有技术，有气质</li>
            <li>前端技术，是一门进阶容易，精通很难的技术;</li>
            <li>相比于后端技术，前端在国内应该是近5年内</li>
            <li>目前,在大学里尚未设有前端的专门专业;</li>
          </ul>
        </div>
        <div class="panel-footer">

        </div>
      </div>
      <!--       
      <div class="panel bar" style="background: url('{% static 'img/line.png' %}') rgba(255, 255, 255, 0.03);">
        <h2>柱形图3</h2>
        <div class="chart"></div>
        <div class="panel-footer">

        </div>
      </div> -->
    </div>

    <div class="column">

      <div class="map">
        <div class="map1" style="background: url('{% static 'img/map.png' %}'); background-size: 100% 100%;"></div>
        <div class="map2" style="background: url('{% static 'img/lbx.png' %}'); background-size: 100% 100%;"></div>
        <div class="map3" style="background: url('{% static 'img/jt.png' %}'); background-size: 100% 100%;"></div>
        <div class="chart"></div>
      </div>
      <div class="no">
        <div class="no-hd">
          <ul>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">全部</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">伊宁市</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">奎屯市</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">霍尔果斯市</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">伊宁县</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">察布查尔县</label></li>
          </ul>
          <ul>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">霍城县</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">巩留县</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">新源县</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">昭苏县</label></li>
            <li><input type="checkbox" name="interest" value="sports" checked id="a"><label for="a">特克斯县</label></li>
            <!-- <li>尼勒克县</li> -->
            <li>
              <input type="checkbox" name="interest" value="sports" checked>尼勒克县
            </li>
          </ul>
        </div>
        <!--         <div class="no-bd">
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div> -->
      </div>
    </div>

    <div class="column">
      <div class="panel bar" style="background: url('img/line.png') rgba(255, 255, 255, 0.03);">
        <h2>业务量柱形图</h2>
        <div class="chart">
        </div>
        <div class="panel-footer">

        </div>
      </div>
      <div class="panel line" style="background: url('img/line.png') rgba(255, 255, 255, 0.03);">
        <h2>粉丝数量月统计图</h2>
        <div class="chart"></div>
        <div class="panel-footer">

        </div>
      </div>
      <div class="panel bar1" style="background: url('img/line.png') rgba(255, 255, 255, 0.03);">
        <h2>学习进度</h2>
        <div class="chart"></div>
        <div class="panel-footer">

        </div>
      </div>
    </div>
  </section>

  <script src="js/flexible.js"></script>

  <script src="js/jquery.js"></script>
  <!-- ztree文件，必须在jQuery之后引入 -->
  <script src="js/jquery.ztree.core.js"></script>  
  <script src="js/jquery.ztree.excheck.js"></script>  
  <!-- <script src="{% static 'bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js' %}"></script> -->
  <script src="js/echarts.min.js"></script>
  <!-- <script src="{% static 'js/china.js' %}"></script> -->
  <!-- <script src="{% static 'js/myMap.js' %}"></script> -->

  <!-- <script src="{% static 'json/新疆维吾尔自治区.js' %}"></script> -->
  <script src="json/伊犁哈萨克自治州.js"></script>
  <script src="js/index.js"></script>
  <script src="js/dashboard.js"></script>

  <!-- 地图 -->
  <script>
    var myChart = echarts.init(document.querySelector(".map .chart"));
    // 点位
    var geoCoordMap = {
      伊宁市: [81.2749, 43.9068, 1000],
      奎屯市: [84.9009, 44.4256, 1001],
      霍尔果斯市: [80.4119, 44.2171, 1002],
      伊宁县: [81.5245, 43.9759, 1003],
      察布查尔锡伯自治县: [81.1484, 43.8393, 1004],
      霍城县: [80.8766, 44.0554, 1005],
      巩留县: [82.2282, 43.4817, 1006],
      新源县: [83.2298, 43.4333, 1007],
      昭苏县: [81.1281, 43.1563, 1008],
      特克斯县: [81.8328, 43.2171, 1009],
      尼勒克县: [82.5089, 43.7974, 1010],
    };

    var mydata = [
      {
        "name": "伊宁市",
        "value": "1024"
      },
      {
        "name": "奎屯市",
        "value": "512"
      },
      {
        "name": "霍尔果斯市",
        "value": "2048"
      },
      {
        "name": "伊宁县",
        "value": "384"
      },
      {
        "name": "察布查尔锡伯自治县",
        "value": "256"
      },
      {
        "name": "霍城县",
        "value": "1012"
      },
      {
        "name": "巩留县",
        "value": "985"
      },
      {
        "name": "新源县",
        "value": "211"
      },
      {
        "name": "昭苏县",
        "value": "789"
      },
      {
        "name": "特克斯县",
        "value": "890"
      },
      {
        "name": "尼勒克县",
        "value": "1450"
      },
    ];
    
    var YNSData = [
      [{}, { name: "伊宁市", value: 0 }],
      [{}, { name: "奎屯市", value: 0 }],
      [{ name: "奎屯市" }, { name: "霍城县", value: 400 }],
      [{ name: "伊宁市" }, { name: "霍城县", value: 45 }],
      [{ name: "霍城县" }, { name: "霍尔果斯市", value: 50 }],
    ];

    var YNXData = [
      [{}, { name: "伊宁县", value: 100 }],
      [{ name: "伊宁县" }, { name: "察布查尔锡伯自治县", value: 250 }],
      [{ name: "伊宁县" }, { name: "昭苏县", value: 40 }],
    ];

    var GLXData = [
      [{}, { name: "新源县", value: 100 }],
      [{ name: "新源县" }, { name: "巩留县", value: 210 }],
      [{ name: "巩留县" }, { name: "特克斯县", value: 45 }],
      [{ name: "特克斯县" }, { name: "昭苏县", value: 65 }],
    ]
    // 小飞机的代码
    var planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
    // 小轿车的代码
    // var planePath = "path://M1136.047896 339.882267C1112.706905 143.149344 1017.345943-0.2756 900.268988 0.0004L358.6862 1.290399c-117.106954 0.276-211.762917 144.067944-234.275909 340.954867C42.146324 391.197247-0.27366 490.974208 0.00134 606.394163c0.184 85.699967 24.016991 162.533937 69.902973 216.394916l0.46 191.364925 212.804916-0.49-0.276-112.077956 697.337728-1.687 0.276 112.076957 212.805917-0.521-0.46-191.364925c45.639982-54.014979 69.134973-131.001949 68.919973-216.700916-0.245-115.205955-43.185983-214.890916-125.725951-263.506897zM358.9312 74.320371l541.583788-1.289c75.392971-0.184 141.491945 101.98596 166.489935 240.563907-11.532995-2.299999-23.648991-3.709999-36.193986-4.446999 0-0.307 0.338-0.92 0.062-0.889999-101.89396 0.246-70.055973 0.154-141.799944 0.337999s-46.559982 0.092-118.118954 0.276l-523.669796 1.257c-19.016993 0.031-36.990986 2.085999-53.983979 5.551998C217.807255 176.920331 283.538229 74.473371 358.9312 74.320371zM218.298255 702.030126c-46.590982 0.092-84.317967-42.787983-84.440967-95.973963-0.123-53.093979 37.419985-96.249962 83.980967-96.372962 46.376982-0.092 84.103967 42.879983 84.256967 95.974962 0.123 53.277979-37.389985 96.249962-83.796967 96.371963z m656.972743-18.126993l-488.365809 0.583c-76.12997 0.184-77.78597-131.124949-0.307-131.308949l488.366809-1.166c71.219972-0.184 71.527972 131.707949 0.306 131.891949z m168.667934 16.133994c-46.468982 0.122-84.195967-42.757983-84.318967-95.943963-0.122-53.093979 37.419985-96.279962 83.858967-96.372962 46.499982-0.122 84.256967 42.849983 84.379967 95.973962 0.03 53.278979-37.450985 96.280962-83.919967 96.342963z";

    // var planePath = 'pin'; //'circle（默认）', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    // console.log(mydata);
    var convertData = function (geoCoordMap, data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      };
      return res;
    };

    var convertAirData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];

        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord],
            value: dataItem[1].value  //此处指定为[1]，因此，起始点的起点不能为空
          });
        }
      }
      return res;
    };

    // 汇总数据
    var sum = 0;
    for (var i = 0; i < mydata.length; i++) {
      sum += parseInt(mydata[i].value);
    }
    // console.log(sum)

    var LineColor = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
    var series = [];
    [
      ["伊宁市", YNSData],
      ["伊宁县", YNXData],
      ["巩留县", GLXData]
    ].forEach(function(item, i) {
      series.push(
        // 航线效果
        {
          name: item[0] + " 线路一", //系列名称，用于tooltip的显示，legend 的图例筛选
          type: "lines",
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: "red", //arrow箭头的颜色
            symbolSize: 3
          },
          lineStyle: {
            normal: {
              color: LineColor[i],
              width: 1,
              curveness: 0.2
            }
          },
          data: convertAirData(item[1])
        },
        // 箭头效果
        {
          name: item[0] + " 线路二",
          type: "lines",
          zlevel: 2,
          symbol: ["none", "arrow"],
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: LineColor[i],
              width: 1,
              opacity: 0.6,
              curveness: 0.2
            }
          },
          data: convertAirData(item[1])
        },
        // 散点效果
        {
          name: item[0] + " 线路三",
          type: "effectScatter",
          coordinateSystem: "geo",
          // zlevel: 2,
/*           rippleEffect: {
            brushType: "stroke"
          }, */
/*           label: {
            normal: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          }, */
          symbolSize: function(val) {
            return val[3] / 100;
          },
/*           itemStyle: {
            normal: {
              color: LineColor[i]
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }, */
/*           data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          }) */
          data: convertData(geoCoordMap, mydata),
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true, // 是否显示鼠标悬浮动画
          label: {
            // 静态显示时的样式
            normal: {
              show: true, // 显示地区名称
              formatter: function (data) { // 显示模板，散点的脚注
                //console.log(data)
                return data.name
              },
              position: 'bottom', // 显示位置

            },
            // 鼠标悬浮上去的样式
            emphasis: {
              show: true, // 显示地区名称
              color: "red",
            },
          },
          itemStyle: {
            normal: {
              color: function (res) {
                let value = res.value[3]
                // console.log(value)
                // 根据value值对标点进行不同颜色显示
                if (value < 500) {
                  return '#ff3859'
                } else if (value < 1000) {
                  return '#4ed7fa'
                } else if (value < 1500) {
                  return '#fac531'
                } else {
                  return '#01ff5b'
                }
              },
              shadowBlur: 10,
            },
            // 鼠标悬浮上去的样式
            emphasis: {
              color: "red",
            },
          },
          zlevel: 3
        }
      );
    });
    // console.log(series);

    var img = document.createElement('img');
      img.src = "img/ili820.png"

    var option = {
      // 标题
      title: {
        text: '总数' + sum + "人",
        left: 'center',
        textStyle: {
          fontsize: 18,
          fontWeight: "bold",
          color: 'yellow'
        }
      },
      // 提示框组件
      tooltip: {
        trigger: 'item',
/*         formatter: function (params) {
          // console.log(params)
          return "单位:" + '&nbsp&nbsp&nbsp' + params.name + '<br>' +
                  "经度：" + params.value[0] + '<br>' +
                  "纬度：" + params.value[1] + '<br>' +
                  "数值：" + params.value[2]
        }, */
        formatter: function(params, ticket, callback) {
          if (params.seriesType == "effectScatter") {
            return "单位:" + '&nbsp&nbsp&nbsp' + params.name + '<br>' +
                  "经度：" + params.value[0] + '<br>' +
                  "纬度：" + params.value[1] + '<br>' +
                  "高程：" + params.value[2] + '<br>' +
                  "数值：" + params.value[3] 
            // return "线路：" + params.data.name + "" + params.data.value[2];
          } else if (params.seriesType == "lines") {
            return (
              "区间：" + params.data.fromName +
              "-->" + params.data.toName +
              "<br />" +
              "距离：" + params.data.value
            );
          } else {
            return params.name;
          }
        }
      },
      // 图例
      legend: {
        orient: "vertical",
        top: "bottom",
        left: "right",
        data: ["伊宁市 线路一", "伊宁县 线路二", "巩留县 线路三"],
        textStyle: {
          color: "#fff"
        },
        selectedMode: "multiple"
      }, 
      // 
      geo: {
        map: "伊犁哈萨克自治州",
        // 缩放比例
        zoom: 1.2,
        // 是否缩放，scale缩放，move平移，true两个都开启
        roam: false,
        // 缩放限制
        scaleLimit: {
          min: 1,
          max: 2.4,
        },
        // 县级单位名称的标签
        label: {
          normal: {
            show: false,
            textStyle: {
              fontSize: 16,
              fontWeight: 'bold',
              color: "#ffff00",
            }
          },
          // 高亮状态下的样式
          emphasis: {
            show: true,
            color: "#ffffff"
          }
        },
        itemStyle: {
          normal: {
            //areaColor: "rgba(20, 41, 87,0.6)",
            borderColor: "#195bb9",
            borderWidth: 1,
            areaColor: {
              image: img,
              repeat: 'no-repeat',
              x: 86,
              y: 90,
              scaleX: 0.837,
              scaleY: 0.839,
            }
          },
          // 鼠标经过时显示
          emphasis: {
            areaColor: "#2B91B7", //默认是黄色
            /* areaColor: {
              image: img,
              repeat: 'no-repeat',
            } */
          }
        },
      },
      // 右下角图例
/*       visualMap: {
        type: 'piecewise',
        left: 'right',
        //right: '20%',
        bottom: 8,
        show: true,
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold',
          color: "#ffff00",
        },
        pieces: [
          { gte: 3000, lte: 9999 },
          { gte: 1000, lte: 2999 },
          { gte: 500, lte: 999 },
          { gte: 100, lte: 499 },
          { gte: 0, lte: 99 }
        ], 
        color: ["#000079", "#0000c6", "#2828ff", "#6a6aff", "#9393ff"],
        seriesIndex: "2"
      },  */
      series: series,
      //console.log(series)
      // 
/*       series: [
        {
          name: '人数', // 自定义名称
          type: 'effectScatter', // scatter  effectScatter  
          coordinateSystem: 'geo', // 设置坐标系类型
          data: convertData(geoCoordMap, mydata), // 设置散点位置和数据
          symbolSize: function (val) { // 设置散点大小
            return val[2] / 100;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true, // 是否显示鼠标悬浮动画
          label: {
            // 静态显示时的样式
            normal: {
              show: true, // 显示地区名称
              formatter: function (data) { // 显示模板，散点的脚注
                //console.log(data)
                return data.value[2]
              },
              position: 'bottom', // 显示位置

            },
            // 鼠标悬浮上去的样式
            emphasis: {
              show: true, // 显示地区名称
              color: "red",
            },
          },
          // 这里和visualmap冲突，但是emphasis依然生效
          itemStyle: {
            normal: {
              color: function (res) {
                let value = res.value[2]
                // console.log(value)
                // 根据value值对标点进行不同颜色显示
                if (value < 500) {
                  return '#ff3859'
                } else if (value < 1000) {
                  return '#4ed7fa'
                } else if (value < 1500) {
                  return '#fac531'
                } else {
                  return '#01ff5b'
                }
              },
              shadowBlur: 10,
            },
            // 鼠标悬浮上去的样式
            emphasis: {
              color: "red",
            },
          },
          zlevel: 3
        }
      ], */
    };
    // console.log("---");
    // console.log(series);
    // console.log("===");
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  </script>

  <SCRIPT type="text/javascript">
      
    var setting = {
      check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: { "Y": "ps", "N": "ps" }
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };

    var zNodes =[
      { id:1, pId:0, name:"组织建设", open:true},
      { id:11, pId:1, name:"随意勾选 1-1", open:true},
      { id:111, pId:11, name:"随意勾选 1-1-1"},
      { id:112, pId:11, name:"随意勾选 1-1-2"},
      { id:12, pId:1, name:"随意勾选 1-2", open:true},
      { id:121, pId:12, name:"随意勾选 1-2-1"},
      { id:122, pId:12, name:"随意勾选 1-2-2"},
      { id:2, pId:0, name:"人力资料 2", checked:true, open:true},
      { id:21, pId:2, name:"随意勾选 2-1"},
      { id:22, pId:2, name:"随意勾选 2-2", open:true},
      { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
      { id:222, pId:22, name:"随意勾选 2-2-2"},
      { id:23, pId:2, name:"随意勾选 2-3"},
      { id:3, pId:0, name:"地质灾害 3", checked:true, open:true},
      { id:31, pId:3, name:"随意勾选 3-1"},
      { id:32, pId:3, name:"随意勾选 3-2", open:true},
      { id:321, pId:32, name:"随意勾选 3-2-1", checked:true},
      { id:322, pId:32, name:"随意勾选 3-2-2"},
      { id:33, pId:3, name:"随意勾选 3-3"},
    ];
    
    var code;
    
    function setCheck() {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      // py = $("#py").attr("checked")? "p":"",
      // sy = $("#sy").attr("checked")? "s":"",
      // pn = $("#pn").attr("checked")? "p":"",
      // sn = $("#sn").attr("checked")? "s":"",
      type = { "Y":py + sy, "N":pn + sn};
      zTree.setting.check.chkboxType = type;
      showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
      if (!code) code = $("#code");
      code.empty();
      code.append("<li>"+str+"</li>");
    }
    
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      setCheck();
      $("#py").bind("change", setCheck);
      $("#sy").bind("change", setCheck);
      $("#pn").bind("change", setCheck);
      $("#sn").bind("change", setCheck);
    });
    //-->
  </SCRIPT>

  <!-- 滚动新闻 -->
  <script>
    function moveTo(obj) {
        $(obj).find("ul:first").animate({
            marginTop: "-36px"
        }, 2000, function () {
            $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
        });
    }
    var timer;
    $('#auto-scroll').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval('moveTo("#auto-scroll")', 3000);
    }).trigger('mouseleave');
  </script>

</body>
</html>